<template>
  <header class="page_head">
    <div class="menu">
      <img src="../../static/image/菜单.png" alt="">
    </div>
    <div class="top_nav">
      <router-link
        tag="img"
        :to="{ path: 'music'}"
        :class="{ active: isActive === '/musci' }"
        src="../../static/image/音乐.png"></router-link>
      <router-link
        tag="img"
        :to="{ path: 'home'}"
        :class="{ active: isActive === '/home' }"
        src="../../static/image/歌单.png"></router-link>
      <router-link
        tag="img"
        :to="{ path: 'social'}"
        :class="{ active: isActive === '/social' }"
       src="../../static/image/社交.png"></router-link>
    </div>
    <div class="search">
      <img src="../../static/image/搜索.png" alt="">
    </div>
  </header>
</template>
<script>
export default {
  name:'PageTop',
  computed:{
    isActive(){
      return this.$route.path
    }
  },
  methods:{
    
  }
}
</script>
<style lang='less'>
@import '../../static/css/pageTop.less';
</style>


